<template>
  <Modal
    v-model="show"
    v-bind:title="modalTitle"
    :scrollable="true"
    class-name="vertical-center-modal"
    :mask-closable="false"
    @on-cancel="cancel"
  >
    <Form ref="staffInfoForm" :label-width="55" :model="staffInfo" :rules="ruleValidate">
      <!--照片-->
      <Row type="flex" justify="center" style="margin-bottom: 5px">
        <div style="margin-bottom: 10px">
          <a href="javascript:void(0)" class="staff-file" ref="avatar_staff">
            <input
              type="file"
              accept="image/png, image/jpeg, image/jpg"
              @change="preview_staff"
              title="  "
            >
          </a>
        </div>
      </Row>
      <Row type="flex" justify="space-between">
        <Col style="width: 48.5%">
          <FormItem label="姓名" prop="user_name">
            <Input v-model.trim="staffInfo.user_name" placeholder="请填写姓名"/>
          </FormItem>
          <FormItem label="工号" prop="user_no">
            <Input placeholder="请填写工号" style="width: 100%" v-model.trim="staffInfo.user_no"/>
          </FormItem>
          <FormItem label="邮箱" prop="user_email">
            <Input placeholder="请填写邮箱" v-model.trim="staffInfo.user_email"/>
          </FormItem>
          <FormItem label="电话" prop="user_phone">
            <Input placeholder="电话（可选）" v-model.trim="staffInfo.user_phone"/>
          </FormItem>
        </Col>
        <Col style="width: 48.5%">
          <FormItem label="部门" prop="user_dept">
            <Select v-model="staffInfo.user_dept">
              <Option v-for="item in departmentList" :value="item.value" :key="item.value">
                {{ item.label
                }}
              </Option>
            </Select>
          </FormItem>
          <FormItem label="性别" prop="user_sex">
            <RadioGroup v-model="staffInfo.user_sex">
              <Radio label="1">男</Radio>
              <Radio label="0">女</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="职位" prop="user_position">
            <Input placeholder="职位（可选）" v-model.trim="staffInfo.user_position"/>
          </FormItem>
          <FormItem label="主标题" prop="user_mark">
            <Input v-model="staffInfo.user_mark" placeholder="请输入欢迎标语"/>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <FormItem label="副标题" prop="user_mark2" style="margin-bottom: 2px">
          <Input v-model="staffInfo.user_mark2" placeholder="请输入副标语"/>
        </FormItem>
      </Row>
    </Form>
    <div slot="footer">
      <Button type="primary" @click="handleSubmit()">提交</Button>
    </div>
  </Modal>
</template>
<script>
import {
  getStaffData,
  getAvatar,
  addOrUpdateStaff,
  deleteUser,
  getDepartmentList,
  regFeature,
  getFeature,
  delFeature,
  uploadStaffData,
  registBatch
} from "../../../controllers/user";
import { read,recordToUser } from "../../../controllers/record";
import pic from "../../../images/upload.png";

export default {
  name: "add-staff",
  data: () => {
    return {
      show: false,
      edit_flag: true,
      modalTitle: "添加至员工",
      departmentList: [],
      rec_id: "",
      staffInfo: {
        user_type: "0",
        user_id: "",
        user_name: "",
        user_dept: "",
        user_email: "",
        user_phone: "",
        user_no: "",
        user_sex: "1",
        user_mark: "",
        user_mark2: "",
        user_avatar: "",
        user_position: "",
        rec_capture: ""
      },
      ruleValidate: {
        // user_id: [
        //   { required: true, message: "账号不可以为空", trigger: "blur" }
        // ],
        // user_no: [
        //     {required: true, message: "工号不可以为空", trigger: "blur"}
        // ],
        user_name: [
          { required: true, message: "姓名不可以为空", trigger: "blur" }
        ],
        user_dept: [
          { required: true, message: "部门不可以为空", trigger: "blur" }
        ],
        user_sex: [],
        user_email: [
          { type: "email", message: "邮箱格式不正确", trigger: "blur" }
        ],
        user_phone: [
          {
            pattern: /^1\d{10}$/,
            message: "电话格式不正确",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {},
  methods: {
    showModal(row) {
      getDepartmentList("0").then(async json => {
        this.departmentList = json.data;
        this.staffInfo.user_id = row.user_id;
        this.staffInfo.user_avatar = row.user_avatar;
        let image = pic;
        if (!row.user_avatar && row.rec_capture) {
          image = await read(row.rec_capture);
          this.staffInfo.user_avatar = image.split(",")[1];
        } else if (this.staffInfo.user_avatar) {
          image = this.staffInfo.user_avatar;
        }
        this.staffInfo.user_name = row.user_name;
        this.staffInfo.rec_capture = row.rec_capture;
        this.rec_id = row.rec_id;
        this.$refs["avatar_staff"].style.backgroundImage = "url(" + image + ")";
        this.show = true;
      });
    },
    cancel() {
      this.show = false;
    },
    preview_staff() {},
    handleSubmit() {
      this.$refs["staffInfoForm"].validate(async valid => {
        if (!valid) {
          this.$Message.error("请检查输入!");
          return;
        }

        let options = this.staffInfo.user_id ? "update" : "register";
        if(options == "update") {
          this.staffInfo.user_avatar = "";
        }
        addOrUpdateStaff(options, this.staffInfo).then(async res => {
          if (res.code == 0) {
            if (options == "register") {
              let user_id = res.data.user_id;
              let image = await read(this.staffInfo.rec_capture);
              let parts = image.split(",");
              let format = parts[0];
              let data = parts[1];
              regFeature({
                user_id: user_id,
                feature_pic: [
                  {
                    type: "png",
                    picdata: data
                  }
                ]
              });
              recordToUser({
                user_id: user_id,
                rec_id: this.rec_id
              })
            }
            this.staffInfo.user_avatar = "";
            this.$Message.success("提交成功!");
            this.show = false;
            this.$emit("updated");
            // });
          } else {
            this.$Message.error("提交失败!");
          }
        });
      });
    }
  }
};
</script>